<template>
  <div class="btn-group">
    <van-button round type="warning" block size="normal" class="btn" @click="onInvite">邀请朋友砍一刀</van-button>
    <van-button round type="danger" block size="normal" class="btn" @click="showSku = true">现价购买</van-button>
    <van-sku
      v-model="showSku"
      :sku="goodsSku"
      :show-add-cart-btn="false"
      :goods="goodsInfo"
      :quota="quota"
      :custom-stepper-config="customStepperConfig"
      close-on-click-overlay
      @buy-clicked="onBuyNow"
      @sku-selected="onSkuSelect"
    >
      <div slot="sku-header-price" slot-scope="props">
        <div class="van-sku__goods-price">
          <span>{{goodsPrice | yuan}}</span>
        </div>
      </div>
      <div slot="sku-actions" slot-scope="props">
        <div class="van-sku-actions">
          <van-button
            type="primary"
            bottom-action
            @click="props.skuEventBus.$emit('sku:buy')"
            :disabled="disableOperation"
          >立即购买</van-button>
        </div>
      </div>
    </van-sku>
  </div>
</template>
<script>
import { isEmpty } from "@/utils/util";
import { _encode } from "@/utils/base64";
import { Sku } from "vant";
export default {
  data() {
    return {
      showSku: false,
      sku_selectedNum: 1,
      sku_selectedComb: null
    };
  },
  props: {
    detail: Object,
    goodsInfo: Object
  },
  computed: {
    goodsPrice() {
      return this.detail.now_bargain_money;
    },
    // 计算总库存
    countStock() {
      const list = this.detail.sku ? this.detail.sku.list : [];
      let stock = 0;
      if (list && !isEmpty(list)) {
        list.forEach(e => {
          stock += parseInt(e.stock_num);
        });
      }
      return stock;
    },
    goodsSku() {
      const $this = this;
      const goods = $this.detail;
      let obj = {};
      if (goods.sku) {
        obj = {
          tree: goods.sku.tree ? goods.sku.tree : [],
          list: $this.tranList,
          price: $this.goodsPrice,
          stock_num: $this.countStock, // 商品总库存
          collection_id: isEmpty(goods.sku.tree) ? $this.tranList[0].id : 0, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
          none_sku: isEmpty(goods.sku.tree) // 是否无规格商品
        };
      }
      return obj;
    },
    tranList() {
      const list = this.detail.sku ? this.detail.sku.list : [];
      list.forEach(e => {
        e.price = parseFloat(e.price) * 100;
      });
      return list;
    },
    // 活动商品sku限购数量
    quota() {
      const $this = this;
      const goodsSku = isEmpty($this.goodsSku) ? null : $this.goodsSku;
      const sku_selectedComb = $this.sku_selectedComb;
      let quota = -1;
      if (!goodsSku.none_sku && sku_selectedComb) {
        quota = sku_selectedComb.max_buy;
      } else if (goodsSku.none_sku) {
        quota = goodsSku.list[0].max_buy;
      }
      return quota;
    },
    // 限购数为0 禁止操作
    disableOperation() {
      let flag = false;
      // 活动限购为0则不能购买
      if (this.quota === 0) {
        flag = true;
      }
      return flag;
    },
    // sku 步进器操作
    customStepperConfig() {
      const $this = this;
      const quotaText = $this.quota == -1 ? "" : "限购" + $this.quota + "件";
      return {
        quotaText,
        handleOverLimit: data => {
          const { action, limitType, quota, quotaUsed } = data;
          if (action === "minus") {
            $this.$Toast("至少选择一件！");
          } else if (action === "plus") {
            $this.$Toast(limitType === 1 ? "库存不足！" : `限购${quota}件！`);
          }
        },
        handleStepperChange: num => {
          // 限制最大输入数量
          const limitFlag = $this.quota > 0; // 活动限购量 真为限购 否为不限购
          let stock = 0; // 库存量
          if (!$this.goodsSku.none_sku && $this.sku_selectedComb) {
            stock = $this.sku_selectedComb.stock_num;
          } else {
            stock = $this.countStock;
          }
          const limitNum = $this.quota > stock ? stock : $this.quota; //限购量不能大于库存
          $this.sku_selectedNum = limitFlag
            ? num > limitNum
              ? limitNum
              : num
            : num > stock
            ? stock
            : num;
        }
      };
    }
  },
  methods: {
    onInvite() {
      this.$Toast(
        this.$store.state.isWeixin
          ? "微信环境下点击右上角分享"
          : "手机浏览器点击底部工具栏分享"
      );
    },
    // 选择规格
    onSkuSelect(data) {
      this.sku_selectedComb = data.selectedSkuComb;
    },
    onBuyNow(data) {
      const $this = this;
      const params = {};
      params.order_tag = "buy_now";
      params.sku_list = [];
      let sku_list_obj = {};
      sku_list_obj.num = $this.sku_selectedNum;
      sku_list_obj.sku_id = data.selectedSkuComb.id;
      sku_list_obj.bargain_id = $this.detail.bargain_id;
      params.sku_list.push(sku_list_obj);
      // console.log(params);
      // return;
      $this.$router.push({
        name: "order-confirm",
        query: {
          params: _encode(JSON.stringify(params))
        }
      });
    }
  },
  components: {
    [Sku.name]: Sku
  }
};
</script>
<style scoped>
.btn-group .btn {
  margin: 15px 0;
}

.van-button--disabled {
  opacity: 1;
}

.btn-cart.van-button--disabled,
.btn-buy.van-button--disabled,
.van-button--bottom-action.van-button--primary.van-button--disabled {
  color: #999;
  background-color: #e8e8e8;
  border: 1px solid #e5e5e5;
  opacity: 1;
}
</style>
